<template>
  <div>
    <div class="card" style="width: 100%; padding: 40px">
      <el-form :model="data.form" ref="formRef" label-width="100px" label-position="right" style="padding-right: 40px">
        <el-form-item label="原密码" prop="password">
          <el-input prefix-icon="User" type="password"  v-model="data.form.password" placeholder="请输入原密码"/>
        </el-form-item>
        <el-form-item label="密码" prop="password1">
          <el-input prefix-icon="User" type="password"  v-model="data.form.password1" placeholder="请输入新密码"/>
        </el-form-item>
        <el-form-item label="确认密码" prop="password2">
          <el-input prefix-icon="User" type="password"  v-model="data.form.password2" placeholder="请再次输入新密码"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="update">确认</el-button>
          <el-button type="info" @click="reset" >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {Plus} from "@element-plus/icons-vue"

const data = reactive({
  form: {},
})

const update = () => {
  console.log("表单数据:"+JSON.stringify(data.form));
  request.post('/user/updatepwd', data.form).then(res => {
    if (res.code === '200') {
      ElMessage.success(res.msg);
      localStorage.removeItem('user');
      localStorage.removeItem('token');
      router.push('/login')// 登录页面
    } else {
      ElMessage.error(res.msg);
    }
  })
}

//重置
const reset = () => {
  data.form = {}
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>